<!-- 班级详情页 -->
<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /班级详情 开始 -->
        <section class="container">
            <section class="path-wrap txtOf hLh30">
                <a href="/" title class="c-999 fsize14">首页</a>
                \
                <a href="/classroom" title class="c-999 fsize14">班级列表</a>
                \
                <span class="c-333 fsize14">{{info.name}}</span>
            </section>
            <div>
                <article class="c-v-pic-wrap" style="height: 357px;">
                    <section class="p-h-video-box" id="videoPlay">
                        <img
                            style="width:100%;height:100%"
                            :src="info.cover"
                            :alt="info.name"
                            class="dis c-v-pic"
                        />
                    </section>
                </article>
                <aside class="c-attr-wrap">
                    <section class="ml20 mr15">
                        <h2 class="hLh30 txtOf mt15">
                            <span class="c-fff fsize24">{{info.name}}</span>
                        </h2>
                        <section class="c-attr-jg">
                            <span class="c-fff">价格：</span>
                            <b class="c-yellow" style="font-size:24px;">￥{{info.price}}</b>
                        </section>
                        <section class="c-attr-mt of"></section>
                        <section class="c-attr-mt">
                            <a
                                href="#"
                                title="立即加入"
                                class="comm-btn c-btn-3"
                                @click.prevent="inOrOutClass()"
                            >{{isIn?"退出班级":"加入班级"}}</a>
                        </section>
                    </section>
                </aside>
                <aside class="thr-attr-box">
                    <ol class="thr-attr-ol">
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">课程数</span>
                                <br />
                                <h6 class="c-fff f-fM mt10">{{courses.length}}</h6>
                            </aside>
                        </li>
                        <li>
                            <p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">讲师数</span>
                                <br />
                                <h6 class="c-fff f-fM mt10">{{teachers.length}}</h6>
                            </aside>
                        </li>
                    </ol>
                </aside>
                <div class="clear"></div>
            </div>
            <!-- /班级封面介绍 -->
            <div class="mt20 c-infor-box">
                <article class="fl col-7">
                    <section class="mr30">
                        <div class="i-box">
                            <div>
                                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                                    <a name="c-i" class="current" title="课程详情">班级详情</a>
                                </section>
                            </div>
                            <article class="ml10 mr10 pt20">
                                <div>
                                    <h6 class="c-i-content c-infor-title">
                                        <span>班级介绍</span>
                                    </h6>
                                    <div class="course-txt-body-wrap">
                                        <section class="course-txt-body">
                                            <p v-html="info.sign"></p>
                                        </section>
                                    </div>
                                </div>
                                <!-- /课程介绍 -->
                                <div class="mt50">
                                    <h6 class="c-g-content c-infor-title">
                                        <span>班级课程</span>
                                    </h6>
                                    <br />
                                    <br />
                                    <article class="comm-course-list">
                                        <ul class="of" id="bna">
                                            <li v-for="course in courses" :key="course.id">
                                                <div class="cc-l-wrap">
                                                    <section class="course-img">
                                                        <img
                                                            :src="course.cover"
                                                            class="img-responsive"
                                                            :alt="course.title"
                                                            style="width:100%;height:130px"
                                                        />
                                                        <div class="cc-mask">
                                                            <a
                                                                @click.prevent="gotoCourse(course.id)"
                                                                :title="course.title"
                                                                class="comm-btn c-btn-1"
                                                            >开始学习</a>
                                                        </div>
                                                    </section>
                                                    <h3 class="hLh30 txtOf mt10">
                                                        <a
                                                            @click.prevent="gotoCourse(course.id)"
                                                            :title="course.title"
                                                            class="course-title fsize18 c-333"
                                                        >{{course.title}}</a>
                                                    </h3>
                                                    <section class="mt10 hLh20 of">
                                                        <span class="fl jgAttr c-ccc f-fA">
                                                            <i
                                                                class="c-999 f-fA"
                                                            >{{course.buyCount}}人学习</i>
                                                            |
                                                            <i
                                                                class="c-999 f-fA"
                                                            >{{course.viewCount}}人浏览</i>
                                                        </span>
                                                    </section>
                                                </div>
                                            </li>
                                        </ul>
                                    </article>

                                    <div class="clear"></div>
                                </div>
                                <!-- /课程大纲 -->
                            </article>
                        </div>
                    </section>
                </article>
                <aside class="fl col-3">
                    <div class="i-box">
                        <div>
                            <section class="c-infor-tabTitle c-tab-title">
                                <a title href="javascript:void(0)">班级讲师</a>
                            </section>
                            <section class="stud-act-list">
                                <ul style="height: auto;">
                                    <li v-for="teacher in teachers" :key="teacher.id">
                                        <div class="u-face">
                                            <a :href="'/teacher/'+teacher.id">
                                                <img
                                                    width="50"
                                                    height="50"
                                                    alt
                                                    :src="teacher.avatar"
                                                />
                                            </a>
                                        </div>
                                        <section class="hLh30 txtOf">
                                            <a
                                                class="c-333 fsize16 fl"
                                                :href="'/teacher/'+teacher.id"
                                            >{{teacher.name}}</a>
                                        </section>
                                        <section class="hLh20 txtOf">
                                            <span class="c-999">{{teacher.level===1?'高级讲师':'首席讲师'}}</span>
                                        </section>
                                    </li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
        <!-- /班级详情 结束 -->
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import classApi from "@/api/course/classroom";
import cookie from "js-cookie";
import { addOrderByClassId } from "@/api/order/order";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            info: {},
            courses: [],
            teachers: [],
            isIn: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        init() {
            this.getClassInfo().then(() => {
                this.isUserInClass();
            });
        },
        getClassInfo() {
            return new Promise((resolve) => {
                classApi
                    .getClassById(this.$route.params.id)
                    .then((response) => {
                        this.info = response.data.classroom.info;
                        this.courses = response.data.classroom.courses;
                        this.teachers = response.data.classroom.teachers;
                        resolve();
                    });
            });
        },

        isUserInClass() {
            var token = cookie.get("edu_token");
            if (token) {
                classApi.isUserInClass(this.info.id).then((response) => {
                    this.isIn = response.data.isIn;
                });
            }
        },

        //加入或退出班级
        inOrOutClass() {
            var token = cookie.get("edu_token");
            if (!token) {
                this.$confirm("请先登录", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        window.location.href = "/login";
                    })
                    .catch(() => {});
            } else {
                //加入班级
                if (!this.isIn) {
                    if (this.info.price === 0) {
                        classApi.userInClass(this.info.id).then((response) => {
                            this.isIn = true;
                            this.$message({
                                message: "加入成功",
                                type: "success",
                            });
                        });
                    } else {
                        this.$confirm("加入该班级需要付费", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                            .then(() => {
                                this.createOrder();
                            })
                            .catch(() => {});
                    }
                }
                //退出班级
                else {
                    if (this.info.price === 0) {
                        classApi.userOutClass(this.info.id).then((response) => {
                            this.isIn = false;
                            this.$message({
                                message: "已退出",
                                type: "warning",
                            });
                        });
                    } else {
                        this.$confirm(
                            "加入该班级是付费的，再次加入将要收费，确定要继续吗？",
                            "提示",
                            {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            }
                        )
                            .then(() => {
                                classApi
                                    .userOutClass(this.info.id)
                                    .then((response) => {
                                        this.isIn = false;
                                        this.$message({
                                            message: "已退出",
                                            type: "warning",
                                        });
                                    });
                            })
                            .catch(() => {});
                    }
                }
            }
        },

        //跳转至课程详情页
        gotoCourse(courseId) {
            if (!this.isIn) {
                this.$message({
                    message: "您还没有加入该班级",
                    type: "warning",
                });
            } else {
                this.$router.push({
                    path: "/course/" + courseId,
                    query: {
                        isClassCourse: true,
                    },
                });
            }
        },

        createOrder() {
            addOrderByClassId(this.$route.params.id, 1).then((response) => {
                let orderNo = response.data.orderNo;
                this.$router.push({ path: "/order/" + orderNo });
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.init();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
</style>